<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			window.onload = function(){
				function myclick(idStr, fun){
					var btn = document.getElementById(idStr);
					btn.onclick = fun;
				}
				
				myclick("checkAll", function(){
					var firstCheckBox = document.getElementById("first");
					firstCheckBox.checked = true;
					var checkBoxs = document.getElementsByName("hobby");
					for(var i = 0; i < checkBoxs.length; i++){
						checkBoxs[i].checked = true;
					}
				});
				
				myclick("checkNone", function(){
					var firstCheckBox = document.getElementById("first");
					firstCheckBox.checked = false;
					var checkBoxs = document.getElementsByName("hobby");
					for(var i = 0; i < checkBoxs.length; i++){
						checkBoxs[i].checked = false;
					}
				});
				
				myclick("first", function(){
					var checkBoxs = document.getElementsByName("hobby");
					for(var i = 0; i < checkBoxs.length; i++){
						checkBoxs[i].checked = this.checked;
					}
				});
				
				myclick("checkReverse", function(){
					var checkBoxs = document.getElementsByName("hobby");
					var firstCheckBox = document.getElementById("first");
					firstCheckBox.checked = true;
					for(var i = 0; i < checkBoxs.length; i++){
						checkBoxs[i].checked = !checkBoxs[i].checked;
						if(checkBoxs[i].checked == false){
							firstCheckBox.checked = false;
						}
					}
				});
				
				var checkBoxs = document.getElementsByName("hobby");
				for(var i = 0; i < checkBoxs.length; i++){
					checkBoxs[i].onclick = function(){
						var firstCheckBox = document.getElementById("first");
						firstCheckBox.checked = true;
						
						for(var j = 0; j < checkBoxs.length; j++){
							if(checkBoxs[j].checked == false){
								firstCheckBox.checked = false;
								break;
							}
						}
					}
				}
			}
		</script>
	</head>
	<body>
		<form action="http://www.baidu.com" method="get">
			你的爱好是:			
			<input type="checkbox" id="first"/>全选/全部选<br />
			<input type="checkbox" name="hobby" value="swimming"/>游泳
			<input type="checkbox" name="hobby" value="fishming"/>钓鱼
			<input type="checkbox" name="hobby" value="watching"/>看电影
			<input type="checkbox" name="hobby" value="climbing"/>爬山<br />
			<input type="button" id="checkAll" value="全选"/>
			<input type="button" id="checkNone" value="全不选"/>
			<input type="button" id="checkReverse" value="反选"/>
			<input type="submit" value="提交" name="submit"/>
		</form>
	</body>
</html>
